<script setup lang="ts">
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import SearchPart from '@/components/SearchPart/index.vue'
import Sku from '@/components/Sku/index.vue'
import Tabbar from '@/components/Tabbar/index.vue'
import Comment from '@/components/Comment/index.vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useOrderStore } from '@/stores/orderStore'
import { searchProducts } from '@/api/search'

const router = useRouter()
const route = useRoute()
const orderStore = useOrderStore()
const { order } = storeToRefs(orderStore)

const picBar = ref<HTMLElement | null>(null)
const moveContainer = ref<HTMLElement | null>(null)
const bigPic = ref<HTMLElement | null>(null)
const mainPic = ref<HTMLElement | null>(null)
const containerSize = ref<number>(0)
const totalSize = ref<number>(0)
const barPage = ref<number>(0)
const currentPage = ref<number>(1)
const currentIndex = ref<number>(0)
const currentTabbarIndex = ref<number>(0)
const visible = ref<boolean>(false)
const countdown = ref({})
const productPics = ref<string[]>([
  'src/assets/pre.gif',
  'src/assets/pre.jpg',
  'src/assets/bg.gif',
  'src/assets/pre.gif',
  'src/assets/pre.jpg',
  'src/assets/bg.gif',
])

const purchaseInfo = ref({
  couponAmount: 0,
  couponId: 0,
  nickName: 'admin',
  payType: 1,
  orderItemList: [
    {
      productId: 1,
      skuId: '1_0',
      skuName: '小米 红米Note10 5G手机 颜色:白色 内存:8G',
      skuNum: 1,
      skuPrice: 1200,
    },
  ],
  originalTotalAmount: 0.01,
  receiverAddress: '河北省张家口市沽源县快乐家园1号',
  receiverCity: 130700,
  receiverDistrict: 130724,
  receiverName: '老八',
  receiverPhone: '15012563333',
  receiverProvince: 130000,
  receiverTagName: '公司',
  totalAmount: 0.01,
})

const product = ref({
  specs: [
    {
      name: '颜色',
      id: '1369139574067957762',
      values: [
        {
          name: '黑色',
          thumbnailUrl: '/src/assets/pre.gif',
          desc: '',
        },
        {
          name: '白色',
          thumbnailUrl: '/src/assets/pre.jpg',
          desc: '',
        },
      ],
    },
    {
      name: '尺寸',
      id: '1369141324204216321',
      values: [
        {
          name: 'S',
          picture: null,
          desc: '',
        },
        {
          name: 'M',
          picture: null,
          desc: '',
        },
        {
          name: 'L',
          picture: null,
          desc: '',
        },
        {
          name: 'LX',
          picture: null,
          desc: '',
        },
        {
          name: '2LX',
          picture: null,
          desc: '',
        },
      ],
    },
    {
      name: '款式',
      id: '1369141916305723393',
      values: [
        {
          name: '男款',
          picture: null,
          desc: '',
        },
        {
          name: '女款',
          picture: null,
          desc: '',
        },
      ],
    },
  ],
  skus: [
    {
      id: '1369155862131642369',
      skuCode: 'goods-sku-001',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'M',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155863389933570',
      skuCode: 'goods-sku-007',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99821,
      picture:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'S',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155864430120962',
      skuCode: 'goods-sku-003',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99848,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'S',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155865461919746',
      skuCode: 'goods-sku-009',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99959,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'S',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155866451775490',
      skuCode: 'goods-sku-005',
      price: '128.00',
      oldPrice: '210.00',
      stock: 99896,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'L',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155867420659714',
      skuCode: 'goods-sku-011',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99914,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'L',
        },
        {
          name: '款式',
          value: '女款',
        },
      ],
    },
    {
      id: '1369155868389543937',
      skuCode: 'goods-sku-002',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99723,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'M',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'M',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
    {
      id: '1369155870306340866',
      skuCode: 'goods-sku-004',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99961,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'S',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
    {
      id: '1369155871241670658',
      skuCode: 'goods-sku-010',
      price: '128.00',
      oldPrice: '200.00',
      stock: 99968,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'S',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
    {
      id: '1369155872197971970',
      skuCode: 'goods-sku-006',
      price: '148.00',
      oldPrice: '190.00',
      stock: 99906,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/2d5ba800-1868-48c8-9213-1a5f8965a05b.png',
      specs: [
        {
          name: '颜色',
          value: '白色',
        },
        {
          name: '尺寸',
          value: 'L',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
    {
      id: '1369155873162661889',
      skuCode: 'goods-sku-012',
      price: '148.00',
      oldPrice: '210.00',
      stock: 99818,
      thumbnailUrl:
        'http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/cd6c46b6-b944-4479-b547-cdee294568a1.png',
      specs: [
        {
          name: '颜色',
          value: '黑色',
        },
        {
          name: '尺寸',
          value: 'L',
        },
        {
          name: '款式',
          value: '男款',
        },
      ],
    },
  ],
  recommends: [
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      name: '骨瓷咖啡杯套装精致英式欧式杯子陶瓷杯碟简约金边奢华下午茶茶具',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture: '/src/assets/pre.jpg',
    },
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      name: '骨瓷咖啡杯套装精致英式欧式杯子陶瓷杯碟简约金边奢华下午茶茶具',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture: '/src/assets/pre.jpg',
    },
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      name: '骨瓷咖啡杯套装精致英式欧式杯子陶瓷杯碟简约金边奢华下午茶茶具',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture: '/src/assets/pre.jpg',
    },
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      name: '骨瓷咖啡杯套装精致英式欧式杯子陶瓷杯碟简约金边奢华下午茶茶具',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture: '/src/assets/pre.jpg',
    },
    {
      id: '1369155869354233857',
      skuCode: 'goods-sku-008',
      name: '骨瓷咖啡杯套装精致英式欧式杯子陶瓷杯碟简约金边奢华下午茶茶具',
      price: '128.00',
      oldPrice: '200.00',
      stock: 0,
      picture: '/src/assets/pre.jpg',
    },
  ],
})

const productDetail = ref({})

const userAddress = ref([
  {
    id: 1,
    name: 'xxx',
    province: '广东省',
    city: '广州市',
    region: '从化区',
    address: '广州市鳌头镇城鳌大道东与镇西路交叉口西120米粤嵌科技',
    phone: '13812345678',
  },
  {
    id: 2,
    name: 'xxx',
    province: '广东省',
    city: '广州市',
    region: '从化区',
    address: '广州市鳌头镇城鳌大道东与镇西路交叉口西120米粤嵌科技',
    phone: '13812345678',
  },
])

const goPay = () => {
  orderStore.addOrder(purchaseInfo.value)
  // router.push({
  //   name: 'Payment',
  // })
}

const goCart = () => {
  // if(!localStorage.getItem('token')) {

  // }
  router.push({
    name: 'Cart',
  })
}

const countdownTime = (data: any) => {
  const end = new Date(data).getTime()
  const date = new Date().getTime()
  let time = end - date
  if (time <= 0) {
    return
  }
  const timer = setTimeout(() => {
    clearInterval(timer)
    if (
      countdown.value.hour === 0 &&
      countdown.value.minute === 0 &&
      countdown.value.second === 0
    ) {
      return
    }
    countdown.value = formatTime(time)

    countdownTime(data)
  }, 1000)
}

const handleSku = (res: any) => {
  purchaseInfo.value.orderItemList[0] = {
    skuId: res.value.id,
    price: res.value.price,
    oldPrice: res.value.oldPrice,
    stock: res.value.stock,
    specsText: res.value.specs
      .reduce((p, n) => `${p} ${n.name}：${n.value}`, '')
      .trim(),
  }
}

const handleTabChange = (index: any) => {
  currentTabbarIndex.value = index
}

const updateAddress = (item: any) => {}

const decrease = () => {
  if (purchaseInfo.value.orderItemList[0].skuNum > 1) {
    purchaseInfo.value.orderItemList[0].skuNum--
  } else {
    purchaseInfo.value.orderItemList[0].skuNum = 1
  }
}

const increase = () => {
  purchaseInfo.value.orderItemList[0].skuNum++
}

const regex = (product: any) => {
  let reg = /\d+$/
  if (!reg.test(product.skuNum)) {
    product.skuNum = 1
  }
  if (product.skuNum < 1) {
    product.skuNum = 1
  }
}

const changePic = (index: number) => {
  currentIndex.value = index
  mainPic.value!.src = productDetail.value.sliderUrls[index]
  bigPic.value!.children[0].src = productDetail.value.sliderUrls[index]
}

const next = () => {
  if (currentPage.value >= barPage.value) {
    return
  }
  moveContainer.value!.style.left =
    -(currentPage.value * containerSize.value) + 'px'
  currentPage.value++
}

const prev = () => {
  if (currentPage.value <= 1) {
    return
  }
  moveContainer.value!.style.left =
    -((currentPage.value - 2) * containerSize.value) + 'px'
  currentPage.value--
}

const showDialog = () => {
  return (visible.value = true)
}

const hideDialog = () => {
  return (visible.value = false)
}

const formatTime = (time: number) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  // return `${year}-${month}-${day} ${hour}:${minute}:${second}`
  return {
    year,
    month,
    day,
    hour,
    minute,
    second,
  }
}

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    containerSize.value = entry.target.offsetWidth
    barPage.value =
      productPics.value.length > 5
        ? Math.ceil(totalSize.value / containerSize.value)
        : 1
  }
})

const getProductDetail = async (param: any) => {
  const { data: res } = await searchProducts({
    keyword: param,
    pageSize: 10000,
  })
  console.log(param)
  productDetail.value = res.data
    .filter((item: any) => {
      return item.content.productName === param
    })
    .map((item: any) => {
      let handleSpecs = item.content.skuList.map((sku: any) => {
        return sku.skuSpec.split(' + ')
      })
      return {
        id: item.content.id,
        productName: item.content.productName,
        productDesc: item.content.productDesc,
        brand: item.content.brand,
        imageUrls: item.content.imageUrls.split(',')[0],
        saleNum: item.content.saleNum,
        marketPrice: item.content.marketPrice,
        salePrice: item.content.salePrice,
        sliderUrls: item.content.sliderUrls.split(','),
        specs: handleSpecs,
      }
    })[0]
  console.log(productDetail.value)
}

onMounted(() => {
  totalSize.value = moveContainer.value!.offsetWidth
  resizeObserver.observe(picBar.value!)
  mainPic.value!.src = productPics.value[0]
  countdownTime('2024-06-18')
  console.log('商品id:', route.query)
  getProductDetail(route.query.title)
})

onUnmounted(() => {
  resizeObserver.disconnect()
})
</script>

<template>
  <Header />
  <div class="search-wrapper">
    <SearchPart />
  </div>
  <div class="product-container">
    <div class="product-wrapper">
      <div class="store-container flex-row">
        <div class="store-info flex-row">
          <div class="pic">
            <img
              src="https://gw.alicdn.com/imgextra//88/83/TB139bOhvzO3e4jSZFxSuuP_FXa.jpg_110x10000q50.jpg_.webp"
              alt=""
            />
          </div>
          <div class="info">
            <div class="info-top">
              <span>sandisk闪迪旗舰店</span>
            </div>
            <div class="info-bottom">
              <div class="rate">
                <div class="point">5.0</div>
                <div class="line"></div>
                <div class="star">♥♥♥♥♥</div>
              </div>
              <div class="evaluate">
                <div class="evaluate-item">平均9小时发货</div>
                <div class="evaluate-item">客服平均22秒回复</div>
                <div class="evaluate-item">服务体验优秀</div>
              </div>
            </div>
          </div>
        </div>
        <div class="operate-container">
          <div class="chat operate">联系客服</div>
          <div class="enter operate">进店逛逛</div>
        </div>
      </div>
      <div class="product-detail">
        <div class="product-introduce flex-row">
          <div class="introduce-left flex-col-7">
            <div class="product-pic">
              <div class="pic" v-magnifier>
                <img ref="mainPic" :src="productDetail.imageUrls" alt="" />
                <div class="mask"></div>
                <div class="big-pic magnifier" ref="bigPic">
                  <img
                    ref="bigPic"
                    class="bigimg"
                    :src="productDetail.imageUrls"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="other-pics">
              <div class="prev" @click="prev">
                <i class="iconfont icon-jiantouzuo"></i>
              </div>
              <div class="pic-list" ref="picBar">
                <ul class="move-container flex-row" ref="moveContainer">
                  <li
                    class="pic-item"
                    :class="[currentIndex === index ? 'active' : '']"
                    v-for="(item, index) in productDetail.sliderUrls"
                    :key="index"
                    @mouseenter="changePic(index)"
                  >
                    <img :src="item" alt="" />
                  </li>
                </ul>
              </div>
              <div class="next" @click="next">
                <i class="iconfont icon-jiantouyou"></i>
              </div>
            </div>
          </div>
          <div class="introduce-right flex-col-17">
            <div class="product-title">
              <span>{{ productDetail.productName }}</span>
            </div>
            <div class="sale-amount">已售<span style="margin-left: 5px;">{{ productDetail.saleNum }}</span></div>
            <div class="seckill" v-if="true">
              <div class="header">
                <div class="title">YourLife秒杀</div>
                <div class="countdown">
                  <span class="desc">距离结束</span>
                  <div class="time">
                    <span class="hour">{{
                      countdown.hour + countdown.day * 24 >= 10
                        ? countdown.hour + countdown.day * 24
                        : `0${countdown.hour * countdown.day}`
                    }}</span>
                    <span class="point">:</span>
                    <span class="minute">{{
                      countdown.minute >= 10
                        ? countdown.minute
                        : `0${countdown.minute}`
                    }}</span>
                    <span class="point">:</span>
                    <span class="second">{{
                      countdown.second >= 10
                        ? countdown.second
                        : `0${countdown.second}`
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="coupons-container">
                <div class="coupons flex-row">
                  <div class="coupons-left">
                    <div class="coupon-price"><span>￥</span>10</div>
                    <div class="coupon-desc">满100元可用</div>
                  </div>
                  <div class="coupons-right">
                    <div class="coupon-get">立即领取</div>
                    <div class="coupon-count">剩余<span>1000</span>张</div>
                  </div>
                </div>
              </div>
              <dl class="price-item">
                <dt class="label">价格</dt>
                <dd class="price">
                  <span>￥</span>{{ productDetail.salePrice }}
                </dd>
              </dl>
              <dl class="policy-item">
                <dt class="label">优惠</dt>
                <dd class="context">每300减50，消费券，买赠</dd>
              </dl>
            </div>
            <div class="normal" v-else>
              <div class="coupons-container">
                <div class="coupons flex-row">
                  <div class="coupons-left">
                    <div class="coupon-price"><span>￥</span>10</div>
                    <div class="coupon-desc">满100元可用</div>
                  </div>
                  <div class="coupons-right">
                    <div class="coupon-get">立即领取</div>
                    <div class="coupon-count">剩余<span>1000</span>张</div>
                  </div>
                </div>
              </div>
              <dl class="price-item">
                <dt class="label">价格</dt>
                <dd class="price">
                  <span>￥</span
                  >{{
                    purchaseInfo.orderItemList[0].totalArderItemList[0].oldPrice
                  }}
                </dd>
              </dl>
              <dl class="policy-item">
                <dt class="label">优惠</dt>
                <dd class="context">每300减50，消费券，买赠</dd>
              </dl>
            </div>
            <div class="activity"></div>
            <div class="policy-address-attribute">
              <dl class="policy-item">
                <dt class="label">配送</dt>
                <dd class="context">
                  假一赔四，退货运费险，极速退款，7天无理由退换
                </dd>
              </dl>
              <dl class="address">
                <dt class="label">送至</dt>
                <dd class="location">
                  <div class="store-addr">
                    <div class="addr-city">北京</div>
                    &nbsp;
                    <div class="addr-region">朝阳</div>
                  </div>
                  &nbsp;至&nbsp;
                  <div class="select-trigger" @click="showDialog">
                    <div class="addr-city">{{ userAddress[0].city }}</div>
                    &nbsp;
                    <div class="addr-region">{{ userAddress[0].region }}</div>
                    <div class="icon-arrow">▼</div>
                  </div>
                  <div class="dialog-container" v-if="visible">
                    <div class="dialog-title">
                      <span>从我的收货地址中选择</span>
                      <span class="close" @click="hideDialog">×</span>
                    </div>
                    <div class="dialog-content">
                      <div
                        class="addr-item"
                        v-for="item in userAddress"
                        :key="item.id"
                        @click="updateAddress(item)"
                      >
                        <div class="addr">
                          {{ item.city }} {{ item.address }} ({{ item.name }}收)
                        </div>
                        <div class="detail">
                          {{ item.province }} {{ item.city }} {{ item.region }}
                          {{ item.address }} {{ item.phone }}
                        </div>
                      </div>
                    </div>
                  </div>
                </dd>
              </dl>
              <div class="attribute">
                <Sku
                  @handle-sku="handleSku"
                  :skus="product.skus"
                  :specs="product.specs"
                />
              </div>
              <div class="purchase-box">
                <dl>
                  <dt>数量</dt>
                  <dd>
                    <div class="quantity">
                      <div class="quantity-input">
                        <button class="decrease" @click="decrease">-</button>
                        <input
                          class="input"
                          type="text"
                          @blur="regex(purchaseInfo.orderItemList[0])"
                          v-model.number="purchaseInfo.orderItemList[0].skuNum"
                        />
                        <button class="increase" @click="increase">+</button>
                      </div>
                      <div
                        class="quantity-tip"
                        v-if="purchaseInfo.orderItemList"
                      >
                        库存{{ purchaseInfo.orderItemList.stock }}件
                      </div>
                    </div>
                  </dd>
                </dl>
              </div>
              <div class="order-collect">
                <div class="order-btn" @click="goPay">
                  <span>立即购买</span>
                </div>
                <div class="collect-btn" @click="goCart">
                  <span>加入购物车</span>
                </div>
                <div class="star-btn"><span>☆</span>收藏</div>
              </div>
            </div>
          </div>
        </div>
        <div class="product-detail-bottom">
          <Tabbar
            @tab-change="handleTabChange"
            :tabs="[
              { title: '商品详情', name: 'detail' },
              { title: '商品评价', name: 'comment' },
            ]"
          >
            <template #detail v-if="currentTabbarIndex === 0">
              {{ productDetail.productDesc }}
            </template>
            <template #comment v-if="currentTabbarIndex === 1">
              <Comment />
            </template>
          </Tabbar>
          <div class="store-recommend">
            <div class="title">本店推荐</div>
            <div class="product-list">
              <div
                class="product-item"
                v-for="item in product.recommends"
                :key="item.id"
              >
                <div class="pic">
                  <img :src="item.picture" alt="" />
                </div>
                <div class="info">
                  <div class="name">{{ item.name }}</div>
                  <div class="price"><span>￥</span>{{ item.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<style lang="less" scoped>
.search-wrapper {
  padding: 20px;
}

.product-container {
  display: flex;
  padding-top: 20px;
  justify-content: center;
  background-color: #d9d9d9;
}

.product-wrapper {
  width: 1296px;
}

.store-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  .store-info {
    cursor: pointer;
  }
  .pic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .info-top {
    height: 20px;
    line-height: 16px;
    font-weight: bold;
  }
  .info-bottom {
    height: 20px;
    display: flex;
    margin-top: 12px;
    font-size: @small-font-size;
  }
  .rate {
    display: flex;
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    margin-right: 4px;
    background-color: #ffefe6;
    align-items: center;
    .point {
      font-weight: 600;
      font-size: 12px;
      color: #ff6200;
    }
    .line {
      width: 1px;
      height: 8px;
      background-color: rgba(255, 98, 0, 0.2);
      margin: 0 3px 0 4px;
    }
    .star {
      color: #ff6200;
    }
  }
  .evaluate {
    display: flex;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
  }
  .evaluate-item {
    padding: 0 8px;
    border-radius: 5px;
    background-color: #f3f6f8;
    color: #50607a;
    &:not(:last-child) {
      margin-right: 4px;
    }
  }
  .operate-container {
    display: flex;
    height: 30px;
    line-height: 30px;
  }
  .operate {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;
    border: #f3f3f3 1px solid;
    cursor: pointer;
  }
  .chat {
    margin-right: 8px;
  }
}

.product-detail {
  padding: 20px;
  border-radius: 10px;
  background-color: var(--mode-bg);
  margin-bottom: 20px;
}

.product-introduce {
}

.introduce-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  // background-color: #f3f3f3;
  border-radius: 10px;
  padding: 10px 0;
  .product-pic {
    width: 350px;
    height: 350px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }
    .pic {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;
    }
  }
  .mask {
    display: none;
    width: 100px;
    height: 100px;
    background-color: yellow;
    opacity: 0.3;
    border-radius: 10px;
    cursor: move;
    pointer-events: none;
  }
  .big-pic {
    display: none;
    position: absolute;
    top: 0;
    left: 102%;
    width: 350px;
    height: 350px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 300;
    img {
      width: 700px;
      height: 700px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .other-pics {
    display: flex;
    width: 350px;
    margin-top: 10px;
    border-radius: 5px;
    align-items: center;
    overflow: hidden;
    padding: 10px 0;
    background-color: #fff;
  }
  .pic-list {
    position: relative;
    width: 290px;
    height: 48px;
    padding: 5px 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.1),
      inset 0px 0px 3px rgba(0, 0, 0, 0.1), inset 0px 0px 3px rgba(0, 0, 0, 0.1),
      inset 0px 0px 3px rgba(0, 0, 0, 0.1), inset 0px 0px 3px rgba(0, 0, 0, 0.1);
    .move-container {
      position: absolute;
      left: 0;
      padding: 0 5px;
      transition: all 0.3s;
    }
    .pic-item {
      box-sizing: border-box;
      width: 48px;
      height: 48px;
      border-radius: 5px;
      border: 1px solid transparent;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      &.active {
        border: 1px solid #ff6200;
      }
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
      &:not(:last-child) {
        margin-right: 8px;
      }
    }
  }
  .next,
  .prev {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 100%;
    color: #ccc;
    background-color: #fff;
    cursor: pointer;
    &:hover {
      color: #ff6200;
    }
  }
}

.introduce-right {
  padding-left: 20px;
  box-sizing: border-box;
  .coupons-container {
    margin-top: 20px;
  }
  .coupons {
    width: 260px;
    height: 80px;
    .coupons-left,
    .coupons-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #ff0000;
    }
    .coupon-desc {
      padding: 5px;
      background-color: #ff99ff;
      border-radius: 5px;
      font-size: 14px;
    }
    .coupon-price {
      font-size: 24px;
      margin-bottom: 5px;
      font-weight: bold;
      span {
        font-size: 12px;
      }
    }
    .coupon-get {
      margin-bottom: 5px;
      font-size: 20px;
      font-weight: bold;
    }
    .coupon-count {
      padding: 5px;
      font-size: 14px;
    }
    .coupons-left {
      width: 130px;
      height: 100%;
      position: relative;
      border-radius: 10px 0 0 10px;
      background-color: #ffccff;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        right: -1px;
        border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
        background-color: #fff;
      }
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: -1px;
        right: -1px;
        border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
        transform: rotate(90deg);
        background-color: #fff;
      }
    }
    .coupons-right {
      width: 130px;
      height: 100%;
      position: relative;
      border-radius: 0 10px 10px 0;
      background-color: #ffccff;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        left: -1px;
        border-radius: 100% 0% 100% 0% / 0% 0% 100% 100%;
        background-color: #fff;
      }
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: -1px;
        left: -1px;
        border-radius: 100% 0% 100% 0% / 0% 0% 100% 100%;
        transform: rotate(-90deg);
        background-color: #fff;
      }
    }
  }
  .price-item {
    margin-top: 20px;
    span {
      font-size: 12px;
    }
    .price {
      font-size: 20px;
      color: #ff6200;
    }
  }
  dl {
    display: flex;
    align-items: center;
  }
  dt {
    width: 50px;
    color: #999;
  }
  dd {
    flex: 1;
    color: #000;
  }
  .product-title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 30px;
  }
  .sale-amount {
    font-size: 14px;
    color: #999;
  }
  .label {
    color: #999;
  }
  .policy-item,
  .address,
  .attribute-item {
    display: flex;
    margin-top: 15px;
    line-height: 30px;
  }
  .location {
    display: flex;
    position: relative;
  }
  .store-addr,
  .select-trigger {
    display: flex;
  }
  .select-trigger {
    cursor: pointer;
  }
  .dialog-container {
    position: absolute;
    top: 30px;
    left: 0;
    padding: 10px;
    z-index: 300;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.1),
      0px 0px 3px rgba(0, 0, 0, 0.1);
    .dialog-title {
      font-weight: 300;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
      .close {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
    .dialog-content {
      width: 454px;
      margin-top: 10px;
      overflow: auto;
      height: 180px;
    }
    .addr-item {
      display: inline-block;
      box-sizing: border-box;
      border: 4px solid #ffefe6;
      width: 214px;
      height: 90px;
      cursor: pointer;
      &:nth-child(odd) {
        margin: 10px 10px 10px 0;
      }
      &:nth-child(3n) {
        margin-top: 0;
        margin-bottom: 0;
      }
      .addr {
        // 一行显示超出
        display: -webkit-box;
        height: 20px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-height: 20px;
        font-size: 12px;
        color: #666;
        padding: 0 2px;
        box-sizing: border-box;
        font-weight: bold;
        border-bottom: 1px dashed #d9d9d9;
      }
      .detail {
        margin-top: 5px;
        padding: 0 2px;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
  .quantity {
    display: flex;
  }
  .quantity-input {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    overflow: hidden;
    .input {
      width: 60px;
      height: 30px;
      border: none;
      outline: none;
      box-sizing: border-box;
      text-align: center;
    }
    .decrease,
    .increase {
      width: 30px;
      height: 30px;
      border: none;
      cursor: pointer;
    }
  }
  .quantity-tip {
    margin-left: 10px;
    line-height: 30px;
  }
  .order-collect {
    margin-top: 20px;
    display: flex;
    .order-btn {
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 20px 0 0 20px;
      background: linear-gradient(90deg, rgb(255, 119, 0), rgb(255, 73, 0));
      box-shadow: rgba(255, 119, 0, 0.2) 0px 9px 13px 0px;
      vertical-align: top;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    .collect-btn {
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      border-radius: 0 20px 20px 0;
      background: linear-gradient(90deg, rgb(255, 203, 0), rgb(255, 148, 2));
      box-shadow: rgba(255, 203, 0, 0.2) 0px 9px 13px 0px;
      vertical-align: top;
      cursor: pointer;
    }
    .star-btn {
      margin-left: 20px;
      line-height: 40px;
      height: 40px;
      padding: 0 10px;
      cursor: pointer;
    }
  }
}
.seckill {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f3f6f8;
  .header {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #fe0851;
    line-height: 25px;
    .title,
    .desc {
      color: #fff;
    }
    .countdown {
      display: flex;
    }
    .desc {
      margin-right: 5px;
      line-height: 25px;
    }
    .time span {
      display: inline-block;
    }

    .hour,
    .second,
    .minute {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      background-color: #000;
      color: #fff;
      border-radius: 5px;
      margin: 0 5px;
    }
    .point {
      margin: 0 5px;
    }
  }
  .coupons-container {
    margin: 0;
    padding: 10px;
    .coupons-left {
      width: 130px;
      height: 100%;
      position: relative;
      border-radius: 10px 0 0 10px;
      background-color: #ffccff;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        right: -1px;
        border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
        background-color: #f3f6f8;
      }
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: -1px;
        right: -1px;
        border-radius: 100% 0% 0% 100% / 0% 100% 0% 100%;
        transform: rotate(90deg);
        background-color: #f3f6f8;
      }
    }
    .coupons-right {
      width: 130px;
      height: 100%;
      position: relative;
      border-radius: 0 10px 10px 0;
      background-color: #ffccff;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        left: -1px;
        border-radius: 100% 0% 100% 0% / 0% 0% 100% 100%;
        background-color: #f3f6f8;
      }
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        bottom: -1px;
        left: -1px;
        border-radius: 100% 0% 100% 0% / 0% 0% 100% 100%;
        transform: rotate(-90deg);
        background-color: #f3f6f8;
      }
    }
  }
  .price-item {
    margin: 0;
    padding: 10px;
  }
  .policy-item {
    margin: 0;
    padding: 10px;
  }
}
.store-recommend {
  margin-top: 20px;
  .title {
    font-weight: 600;
    line-height: 30px;
    height: 30px;
    margin-bottom: 10px;
  }
  .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .product-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      flex: 1;
      box-sizing: border-box;
      padding: 10px;
      margin: 0 10px 10px 0; // 间隙为5px
      background-color: #f0f0f0;
      border-radius: 10px;
      width: calc(
        (100% - 40px) / 5
      ); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 40px) / 5); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 40px) / 5); // 加入这两个后每个item的宽度就生效了
      &:nth-child(5n) {
        // 去除第3n个的margin-right
        margin-right: 0;
      }
      .pic {
        // width: 220px;
        height: 220px;
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 10px;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .name {
        font-size: 16px;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
        margin-bottom: 10px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        font-size: 18px;
        font-weight: 600;
        line-height: 20px;
        height: 20px;
        color: #ff0000;
        margin-bottom: 10px;
        span {
          font-size: 12px;
          font-weight: 400;
          color: #ff0000;
          // text-decoration: line-through;
        }
      }
    }
  }
}

@media screen and (max-width: 1300px) {
  .product-wrapper {
    width: 100%;
  }
  .introduce-left.flex-col-7 {
    padding: 0;
    max-width: calc(4.16667 * 12%);
    flex: 0 0 calc(4.16667 * 12%);
  }
  .introduce-right.flex-col-17 {
    padding: 0;
    max-width: calc(4.16667 * 12%);
    flex: 0 0 calc(4.16667 * 12%);
  }
}

@media screen and (max-width: 1296px) {
  .store-recommend .product-list .product-item {
    width: calc(
      (100% - 30px) / 4
    ); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 30px) / 4); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 30px) / 4); // 加入这两个后每个item的宽度就生效了
    margin: 0 10px 10px 0;
    &:nth-child(4n) {
      // 去除第3n个的margin-right
      margin-right: 0;
    }
  }
}

@media screen and (max-width: 1030px) {
  .store-recommend .product-list .product-item {
    margin: 0 10px 10px 0;
    width: calc(
      (100% - 20px) / 3
    ); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 20px) / 3); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 20px) / 3); // 加入这两个后每个item的宽度就生效了
    &:nth-child(3n) {
      // 去除第3n个的margin-right
      margin-right: 0;
    }
    &:nth-child(4n) {
      margin-right: 10px;
    }
  }
}

@media screen and (max-width: 900px) {
  .introduce-left .product-pic .big-pic {
    top: 100%;
    left: 0;
  }
}

@media screen and (max-width: 840px) {
  .product-detail {
    padding: 10px;
  }
  .introduce-left.flex-col-7 {
    padding: 0;
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .introduce-right.flex-col-17 {
    padding: 0;
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
  }
  .product-introduce {
    flex-wrap: wrap;
  }
  .store-recommend {
    padding: 0;
  }
  .store-recommend .product-list .product-item {
    margin: 0 10px 10px 0;
    width: calc(
      (100% - 10px) / 2
    ); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 10px) / 2); // 加入这两个后每个item的宽度就生效了
    &:nth-child(even) {
      // 去除第3n个的margin-right
      margin-right: 0;
    }
    &:nth-child(odd) {
      margin-right: 10px;
    }
  }
}

@media screen and (max-width: 700px) {
  .store-container {
    flex-wrap: wrap;
  }
  .store-container .store-info.flex-row {
    margin-bottom: 10px;
    padding: 0;
    // height: 80px;
    max-width: calc(4.16667 * 24%);
    flex: 0 0 calc(4.16667 * 24%);
    justify-content: space-between;
  }
  .info {
    width: 100%;
  }
  .store-container .pic {
    display: none;
  }
  .info-bottom {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 448px) {
  .store-container .store-info.flex-row {
    padding: 0;
    height: 80px;
  }
  .store-recommend .product-list .product-item {
    height: 210px;
  }
  .info-bottom .evaluate {
    margin-top: 10px;
  }
}
</style>
